<template>
	 <view class="input-my">
        <view class="wrapper">
            <view class="item-box" @tap.stop="focusHandler(fill.length - 1)">
                <!-- 添加占位符 -->
								<u-icon name="search" color="#4a62e7" size="24" bold></u-icon>
                
                <view  v-for="(val, index) in fill" :key="index" @tap.stop="focusHandler(index)"
                    class="item-input">
                    {{val}}
					<view v-if="fill.length <=1" class="placeholder">{{ placeholder }}</view>
                    <view v-if="!readonly && current == index" class="flicker"></view>
                </view>
				
            </view>
			<u-icon v-if="fill.length >1" name="close-circle" color="#c4c4c4" size="20" @click="clearValueHandle"></u-icon>
        </view>
        <u-keyboard mode="car" :abc='abc' :overlay="false" :show="focus" @backspace="backspace"
            @change="keyInputHandler" @confirm="keyHideHandler" @close="keyHideHandler"
            @cancel="keyHideHandler"></u-keyboard>
    </view>
</template>

<script>
	export default {
		props: {
			placeholder: {
				type: String,
				default: '输入车牌号码或手机号'
			},
			value: {
				type: String,
				default: ''
			},
			readonly: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				focus: false,
				current: 0,
				fill: [],
				abc: true, // 是否切换中英文
			}
		},
		watch: {
			fill(val) {
				this.$emit('input', {
					val: val.join(''),
					length: val.length
				});

				this.$emit('change', val);
			},
			value: {
				handler(n, o) {
					if (this.value != this.fill.join('')) {
						this.init()
					}
				},
				immediate: true
			},
			focus(val) {
				this.$emit('onChangeKeyboard', val);
			},
			current(n, o) {
				if (this.fill[this.current] == undefined) {
					this.fill.push('');
				}
				this.abc = n !== 0 ? true : false
			},
		},
		beforeMount() {
			this.init()
			uni.$on('abc', res => {
				this.abc = res
			})
		},
		methods: {
			clearValueHandle(){
				console.log('点击')
				this.$emit('clearValue');
			},
			init() {
				this.fill = new Array(this.value.length + 1).fill('')
				if (this.value) {
					this.value.split('').forEach((key, index) => {
						this.$set(this.fill, index, key);
					});

					this.current = this.value.length;
				} else {
					this.current = 0
				}
			},
			focusHandler(index = 0) {
				if(this.readonly) return
				this.focus = true;

				this.current = index;
			},
			backspace() {
				console.log(this.fill,this.current,"this.current")
				if (this.current == 0) {
					this.$set(this.fill, this.current, '');
				} else {
					this.fill.splice(this.current - 1, 1)
				}

				if (this.current <= 0) {
					return;
				}

				this.current -= 1;
			},
			keyInputHandler(key) {
				if(this.fill.length>10){
					uni.showToast({
						title: '车牌号码不可超过10位！',
						icon: 'none'
					});
					return
				}
				if (this.current == 0) {
					this.$set(this.fill, this.current, key);
				} else if (this.fill[this.current]) {
					this.fill.splice(this.current, 0, key);
				} else {
					this.$set(this.fill, this.current, key);
				}
				this.current += 1;
			},
			keyHideHandler() {
				this.focus = false;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.input-my{
		.wrapper {
		display: flex;
		justify-content: space-around;
		// background-color: #f5f5f9;
		border-radius: 4px;
		border-color: transparent;
		padding-right: 20rpx;

		.item {
			position: relative;
			max-width: 100rpx;
			flex: 1;
			margin-right: 20rpx;
			height: 70rpx;
			line-height: 70rpx;
			border: 2rpx solid #e5e5e5;
			border-radius: 4rpx;
			text-align: center;
			font-size: 30rpx;
			font-weight: 400;
		}

		.item-box {
			display: flex;
			flex: 1;
			overflow-x: auto;
			padding: 0 5px;
			.placeholder {
				line-height: 70rpx;
				color: #999;
				font-size: 24rpx;
				font-weight: 400;
			}
		}

		.item-input {
			position: relative;
			height: 70rpx;
			padding-right: 10rpx;
			line-height: 70rpx;
			text-align: center;
			font-size: 30rpx;
			font-weight: 400;

			.flicker {
				position: absolute;
				left: 2rpx;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 2rpx;
				height: 40rpx;
				background-color: #333;
				animation: flicker 1.5s infinite;
			}
		}

		.cursor {
			border: 2rpx solid #166ffc;
		}

		.new-energy {
			display: flex;
			flex-direction: column;
			justify-content: center;
			max-width: 100rpx;
			flex: 1;
			height: 90rpx;
			white-space: nowrap;
			border: 2rpx dashed #ccc;
			border-radius: 4rpx;
			text-align: center;
			color: #08b562;
			font-size: 20rpx;
		}

		.item:last-child {
			margin-right: 0;
		}

		@keyframes flicker {
			0% {
				opacity: 0;
			}

			30% {
				opacity: 1;
			}

			100% {
				opacity: 0;
			}
		}
	}
	}

</style>